<template>
    <div class="breadrunb">
        <span v-for="(item,index) in breadcrumbItem" @click="go(index)" :class="{notLast:index<breadcrumbItem.length-1,islast:index==breadcrumbItem.length-1}" :key="index">{{ item.name }} <span v-if="index<breadcrumbItem.length-1"> > </span>
</span>
    </div>
</template>
<script>
export default {
    name:'headerBreadcrumb',
    props:{
        breadcrumbItem : { type : Array, default : ()=>{ return [] } }
        //[{name:}]
    },
    methods:{
        go(index){
            if(index==(this.breadcrumbItem.length-1)) return
            this.$router.go(index-this.breadcrumbItem.length+1)
        }
    }
}
</script>

<style lang="stylus" scoped>
.breadrunb
    background-color #fff
    height: 70px;
    line-height 70px
    padding-left 40px
    margin-bottom 10px
    .notLast
        color #191F25
        cursor pointer
        font-size 16px
    .islast
       color #9D9D9D
       font-size 16px
</style>